import React, { Component } from "react";
import { toast, ToastContainer } from "react-toastify";
import { getToday } from "./../util/index";
import { getStore, removeStore } from "./../util/index";
import styles from "./Header.module.scss";
import Logo from "./../images/logo.png";
import Top from "./../images/top.png";
import api from "./../serve/api";
import login from "./../images/login.png";
import register from "./../images/register.png";
import { withRouter } from "react-router-dom";

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showLogout: false,
      headerImgUrl: null,
      headerImgType: "",
      headerImgId: "",
      inputValue: null
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  componentDidMount() {
    this.getHeaderImg();
  }
  clientThemeAd(type, id) {
    console.log("type", type);
    if (type == "2") this.props.history.push("/mainPage/themeAd/" + id);
  }
  async getHeaderImg() {
    const data = await api.listAdverApi({
      page: 1,
      pageSize: 1,
      type: 1,
      position: 0
    });
    if (data && data.code === "000000") {
      if (data.result.length > 0) {
        const first = data.result[0];
        this.setState({
          headerImgUrl: first.img,
          headerImgId: first.theme_ad_id,
          headerImgType: first.type
        });
      }
    }
  }

  onRegister() {
    // this.props.onRegister()
    this.props.history.push("/mainPage/register");
  }

  onLogin() {
    this.props.onLogin();
    // this.props.history.push('/mainPage/register')
  }

  onUser() {
    const { showLogout } = this.state;
    this.setState({
      showLogout: !showLogout
    });
  }

  logout() {
    toast.success("已登出!", {
      position: toast.POSITION.TOP_RIGHT
    });
    removeStore("zhikuFrontUserName");
    removeStore("zhikuFrontUserId");
  }

  goMain() {
    // this.props.onGoMain()
    this.props.history.push("/mainPage/main");
  }

  onSearch() {
    const { inputValue } = this.state;
    if (!inputValue) {
      return;
    }
    this.props.history.push(`/mainPage/SearchResult/${this.state.inputValue}`);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.value;

    this.setState({
      inputValue: value
    });
  }

  render() {
    const { headerImgUrl, headerImgId, headerImgType } = this.state;
    return (
      <div className={styles.header}>
        <div className={styles.input_login}>
          <div className={styles.input_container}>
            <input
              type="text"
              placeholder="请输入搜索内容"
              value={this.state.inputValue || ""}
              onChange={this.handleInputChange}
            />
            <button onClick={() => this.onSearch()}>搜索</button>
          </div>
          {getStore("zhikuFrontUserName") && (
            <div className={styles.login} onClick={() => this.onUser()}>
              {getStore("zhikuFrontUserName")}
              {this.state.showLogout && (
                <div className={styles.logout} onClick={() => this.logout()}>
                  退出登录
                </div>
              )}
            </div>
          )}
          {!getStore("zhikuFrontUserName") && (
            <ul className={styles.login}>
              <li className={styles.regirst} onClick={() => this.onRegister()}>
                <img src={register} alt="" />
                注册
              </li>
              <li onClick={() => this.onLogin()}>
                <img src={login} alt="" />
                登录
              </li>
            </ul>
          )}
        </div>
        <div className={styles.content}>
          <div className={styles.org}>
            <div className={styles.heaer_img}>
              <img src={Logo} alt="" onClick={() => this.goMain()} />
              <span />
            </div>
            <div className={styles.time}>
              <span className={styles.web}>www.hbzhiku.org.cn</span>
              <span className={styles.time_span}>{`${getToday().calendar} ${
                getToday().week
              }`}</span>
            </div>
            <div className={styles.host}>湖北省社会科学院主办</div>
          </div>
          <img
            src={headerImgUrl ? headerImgUrl : Top}
            alt=""
            onClick={() => this.clientThemeAd(headerImgType, headerImgId)}
          />
        </div>
        <ToastContainer />
      </div>
    );
  }
}
export default withRouter(Header);
